<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        ul,ol,li{
            list-style: none;
        }

        img{
            width: 100%;
            height: 100%;
            display: block;
        }

        .banner{
            width: 100%;
            height: 500px;
            position: relative;
            margin: 50px 0;
        }
        .banner > ul{
            width: 100%;
            height: 100%;
            position: relative;
        }

        .banner>ul>li{
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;

            /* 透明度 */
            opacity: 0;

            transition: opacity .5s linear;
        }

        .banner>ul>li.active{
            opacity: 1;
        }

        .banner>ol{
            width: 200px;
            height: 30px;
            position: absolute;
            left: 30px;
            bottom: 30px;
            background-color: rgba(0,0,0,.5);

            display: flex;
            justify-content: space-around;
            align-items: center;
            border-radius: 15px;
        }

        .banner >ol >li{
            width: 20px;
            height: 20px;
            background-color: aliceblue;
            border-radius: 50%;
            /* 手型鼠标 */
            cursor: pointer;
        }
        .banner>ol>li.active{
            background-color: orange;
        }

        .banner>div{
            width: 40px;
            height: 60px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0,0,0,.5);

            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 30px;
            color: #fff;
        }

        .banner>div.left{
            left: 0;
        }

        .banner>div.right{
            right: 0;
        }
    </style>
</head>
<body>
    <div class="banner">
        <!-- 图片 -->
        <!-- ul.imgBox>li*4>img[src=../img/1($).jpeg] -->
        <ul class="imgBox">
            <li class="active"><img src="../img/1 (1).jpeg" alt=""></li>
            <li><img src="../img/1 (2).jpeg" alt=""></li>
            <li><img src="../img/1 (3).jpeg" alt=""></li>
            <li><img src="../img/1 (4).jpeg" alt=""></li>
        </ul>
        <!-- 焦点 -->
        <ol>
            <li data-i="0" data-name="point" class="active"></li>
            <li data-i="1" data-name="point"></li>
            <li data-i="2" data-name="point"></li>
            <li data-i="3" data-name="point"></li>
        </ol>
        <!-- 左右切换按钮 -->
        <div class="left">&lt;</div>
        <div class="right">&gt;</div>
    </div>

    <script>
        // 获取所有承载图片的li和所有承载焦点的li
        var imgs = document.querySelectorAll('ul>li')
        var points = document.querySelectorAll('ol>li')
        var banner = document.querySelector('.banner')
        // 准备一个变量，表示当前是第几张，默认是0，因为默认显示的是索引第0张
        var index = 0
        // 书写一个切换一张的函数
        // 约定：
        //  参数为true，我们切换下一张
        //  参数为false，我们切换上一张
        //  参数为数字，我们切换到指定索引的那一张
        function changeOne(type){
            // 1.让当前这一张消失
            imgs[index].className = ''
            points[index].className = ''

            // 2.根据type传递来的参数，来切换index的值
            if(type === true){
                index++
            }else if(type === false){
                index--
            }else{
                index = type
            }
            // 判定index的边界值
            if(index >= imgs.length){
                index = 0
            }
            if(index < 0){
                index = imgs.length - 1
            }
            // 3.让改变后的这一张显示出来
            imgs[index].className = 'active'
            points[index].className = 'active'
        }

        // 给轮播图（外面最大的盒子）绑定点击事件
        banner.onclick = function(e){
            // 判断点击的是左按钮
            if(e.target.className === 'left'){
                changeOne(false)
            }
            // 判断点击的是右按钮
            if(e.target.className === 'right'){
                changeOne(true)
            }
            // 判断点击的是焦点盒子
            if(e.target.dataset.name === 'point'){
                // 加了-0就是数值类型，不加是字符串类型
                var i = e.target.dataset.i - 0
                console.log(i)
                console.log(typeof(i))
                changeOne(i)
            }  
        }

        // 自动切换 定时器
        setInterval(function(){
            changeOne(true)
        },1000)
    </script>
</body>
</html>